<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML基础</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/html.css">
</head>
<body>
<div class="container">
    <div class="catalogue">
        <div><a href="#html_jj" target="_self">HTML简介</a></div>
        <div><a href="#html_bq" target="_self">HTML标签</a></div>
        <div><a href="#html_sx" target="_self">HTML属性大全</a></div>
    </div>
    <div class="substance">
        <div class="one">
            <h1 id="html_jj">HTML简介
                <a href="https://www.runoob.com/html/html-colorvalues.html" target="_blank">HTML颜色</a>
            </h1>
            <pre>
HTML(Hypertext Markup Language):超文本标记语言     HTML/CSS/JS: 结构/表现/行为

HTML特点:
        1-HTML不需要编译，直接由浏览器执行       2-HTML文件是一个文本文件
        3-HTML文件后缀名为: html 或 htm       4-HTML大小写不敏感;HTML 和html一样

特殊符号:
    小于号&lt; | &amp;lt;     大于号&gt; | &amp;gt;    已注册&reg; | &amp;reg;    版权&copy; | &amp;copy;    商标&trade; | &amp;trade;    空格&nbsp; | &amp;nbsp;

            </pre>
        </div>
        <div class="one">
            <h1 id="html_bq">HTML标签 | <a href="https://www.runoob.com/tags/ref-byfunc.html" target="_blank">HTML标签列表-菜鸟教程</a></h1>
            <pre>
br:换行   hr:水平线; noShade(实线)       sup:<sup>上标:sup</sup>        sub:<sub>下标:sub</sub>

字体线条: u/ins:底线   strike:横线   s/del:删除线   u:下划线

字体大小:
h1~6:标题    b/strong:粗体字    i/em/dfn:斜体字    kbd:键盘文字    xmp:固定宽度字体(在文件中空白、换行、定位功能有效)    plaintext:固定宽度字体(不执行标记符号)
listing:固定宽度小字体       pre:原格式输出标签    kbd:表示使用者输入文字  tt:打字机字体    big:大字体     small:小字体   blink:闪烁的文字
            </pre>
            <h2>列表标签</h2>
            <pre>
无序列表:   ul->li  type属性值: disc=圆点    square=正方形  circle=空心圆
有序列表:   ol->li  type属性值: 1=数字 | a=小写字母 | A=大写字母 | i=小写罗马数字 | I=大写罗马数字 | start属性:指定起始数值
    demo:   &lt;ol start='2'&gt;&lt;/ol&gt;  //定义列表的起始index
            &lt;li value='2'&gt;  //定义列表的起始index
自定义列表:  dl->dt->dd
    定义式列表 &lt;dl&gt;
                &lt;dt&gt;&lt;/dt&gt;
                &lt;dd&gt;&lt;/dd&gt;
             &lt;/dl&gt;
    表单式列表 &lt;menu&gt;
                &lt;li&gt;&lt;/li&gt;
             &lt;/menu&gt;
    目录式列表 &lt;dir&gt;
                &lt;li&gt;&lt;/li&gt;
             &lt;/dir&gt;

            </pre>
            <h2>a标签</h2>
            <pre>
语法: &lt;a href="" /&gt;内容&lt;a&gt;
属性:    href:链接地址,可以是内部或外部链接(href=# 空链接)
        target: 打开href链接的方式  _self(当前窗口,默认值)/_blank(新窗口)/_top(最高一级窗口)/_parent(父级窗口)
        title: 链接提示文字 name:链接名称
        windowName 已命名的窗口或框架中打开连接

锚链接(id也可以当作锚名)
    demo1(业内跳转): &lt;a href="#锚名1">目录1&lt;/a&gt;   &lt;a href="xx" name="锚名1">内容&lt;/a&gt;
    demo2(跳转其它页):  &lt;a href="网页名称#锚名">跳转其它网页&lt;/a&gt;

demo: 发送邮件
    &lt;a href=" mailto:邮件地址1;邮件地址2?subject=邮件主题&cc=抄送人地址1;抄送人地址2&bcc=密件抄送地址1;密件抄送地址2&body=邮件内容"&gt;发送邮件&lt;/a&gt;

demo: 文件下载
    &lt;a href="下载文件的地址">下载文件&lt;/a&gt;
            </pre>

        </div>
        <div class="one">
            <h1 id="html_sx">HTML属性大全</h1>
            <h2>跑马灯:</h2>
            <pre>
&lt;marquee&gt;...&lt;/marquee&gt;普通卷动
&lt;marquee behavior=slide&gt;...&lt;/marquee&gt;滑动
&lt;marquee behavior=scroll&gt;...&lt;/marquee&gt;预设卷动
&lt;marquee behavior=alternate&gt;...&lt;/marquee&gt;来回卷动
&lt;marquee direction=down&gt;...&lt;/marquee&gt;向下卷动
&lt;marquee direction=up&gt;...&lt;/marquee&gt;向上卷动
&lt;marquee direction=right&gt;&lt;/marquee&gt;向右卷动
&lt;marquee direction=’left’&gt;&lt;/marquee&gt;向左卷动
&lt;marquee loop=2&gt;...&lt;/marquee&gt;卷动次数
&lt;marquee width=180 height=30 &gt;...&lt;/marquee&gt;设定宽度高度
&lt;marquee bgcolor=FF0000&gt;...&lt;/marquee&gt;设定背景颜色
&lt;marquee scrollamount=30  scrolldelay=300 &gt;...&lt;/marquee&gt;设定滚动速度/设定卷动时间
&lt;marquee onmouseover="this.stop()"&gt;...&lt;/marquee&gt;鼠标经过上面时停止滚动
&lt;marquee onmouseover="this.start()"&gt;...&lt;/marquee&gt;鼠标离开时开始滚动


            </pre>
            <h2>分割视窗:</h2>
            <pre>
&lt;frameset cols="20%,*"&gt;左右分割,将左边框架分割大小为 20%右边框架的大小浏览器会自动调整
&lt;frameset cols="20%,*,20%"&gt;分割左中右三个框架
&lt;frameset rows="20%,*"&gt;上下分割,将上面框架分割大小为 20%下面框架的大小浏览器会自动调整
&lt;frameset rows="20%,*,20%"&gt;分割上中下三个框架
    属性:
        marginHeight: 设定视窗的上下边界
        marginWidth:设定视窗的左右边界
        cols:垂直切割窗口(如左右分割两个窗口)接受整数值,百分数,*(*代表占用余下空间);数值的个数代表分成的部分数目,要以逗号分隔;
            例: cols="30,*,50%"; 切成三个视窗,第一部分是30px;第三部分则占整个窗口的50%宽度;第二部分是当分配完第一和第三视图后剩下的空间;
        rows:就是横向切割,将窗口上下分开,数值设置同上;
        frameborder 设置框架的边框，其值有 0 不要边框，1 要边框。
        border 设置框架边框厚度
        framespacing 表示框架与框架间保留空白的距离

frame 元素(单标签)
语法格式: &lt;frame name="" src="url" scrolling="yes/no" noresize&gt;
属性:
    name 框架名称，指定框架来做连接的目标窗口。
    src 框架中要显示的网页文当 url 地址，每个个框架要对应一个 html 文挡。
    scrolling 是否显示滚动条，yes/no,auto 是自动。
    noresize 设置不让使用者改变这个框架的大小，

视框格式总定义 &lt;frameSet&gt;&lt;/frameSet&gt; （取代&lt;BODY&gt;）
视框行长度分配 &lt;frameSet ROWS=,,,&gt;&lt;/frameSet&gt;（pixels 或 %）
视框行长度分配 &lt;frameSet ROWS=*&gt;&lt;/frameSet&gt; （* = 相对大小）
视框栏宽度分配 &lt;frameSet COLS=,,,&gt;&lt;/frameSet&gt;（pixels 或 %）
视框栏宽度分配 &lt;frameSet COLS=*&gt;&lt;/frameSet&gt; （* =相对大小）
定义个别视框 &lt;frame&gt; （定义个别视框）
个别视框内容 &lt;frame SRC="URL"&gt;
个别视框名称 &lt;frame NAME="***"/_blank/_self/_parent/_top&gt;
边缘宽度 &lt;frame marginWidth=?&gt; （「左」与「右」边界）
边缘高度 &lt;frame marginHeight=?&gt; （「天顶」与「地底」边界）
滚动条 &lt;frame SCROLLING="YES/NO/AUTO"&gt;
不可改变大小 &lt;frame NORESIZE&gt;
无视框时的内容 &lt;NOFRAMES&gt;&lt;/NOFRAMES&gt;（如果浏览器不提供视框功能时所显示的内容）
noFrame 元素:
    指定当使用了框架的页面在不支持框架的浏览器中打开时显示的信息
    语法格式： &lt;noframe&gt;......&lt;/noframe&gt;
            </pre>
            <h2>body属性</h2>
            <pre>
1-背景属性:
    背景色语法格式: &lt;body bgcolor="#ff0000"&gt;
    背景图语法格式: &lt;body background="url"&gt;
2-文字属性:
    text 文本颜色(非连接文字颜色)
    link 连接文字颜色(可连接文字颜色)
    alink 活动连接文字颜色(正被点击的可连接文字的颜色)
    vlink 已访问连接文字颜色(已经点击访问过的可连接文字的颜色)
    语法格式：&lt;body text="color" link="color" alink="color" vlink="color"&gt;
3-留白属性:
    语法格式： &lt;body leftMargin="value" topMargin="value"&gt;
            </pre>
            <h2>div属性</h2>
            <pre>
color : #999999 文字颜色                font-family : 宋体 文字字型
font-size : 10pt(文字大小)               font-style:itelic 文字斜体
font-variant:small-caps 小字体         letter-spacing : 1pt 文字间距
line-height : 200% 设定行高             font-weight:bold 文字粗体
vertical-align:sub 下标字 | super 上标字
                text-decoration:line-through(加删除线) | overline(加顶线) | underline(加底线) | none
text-transform : capitalize(首字大写) | uppercase(英文大写) | lowercase(英文写)
                text-align:right(文字右对齐) | left(文字左对齐) | center(文字居中对齐)

 背景
    bgColor: 背景颜色
    background-color:black 背景颜色
    background-image : url(image/bg.gif) 背景图片
    background-attachment : fixed 固定背景
    background-repeat : repeat(重复排列-网页预设) | no-repeat(不重复排列) | repeat-x(在 x 轴重复排列) | repeat-y(在 y 轴重复排列)
    background-position : 90% 90% 背景图片 x 与 y 轴的位置
 链接
    （1） 所有超连接
    （2） link 超连接文字格式
    （3） visited 浏览过的连接文字格式
    （4） active 按下连接的格式
    （5） hover 鼠标移至连接
            </pre>
        </div>
    </div>
</div>
</body>
</html>